<template>
    <el-card>
        <div slot="header">修改监控平台数据
            <el-button type="primary" @click="openDialog(null)">添加平台</el-button>
        </div>
        <div>这些数据请务必确保准确性</div>
        <el-table :data="data" @row-click="openDialog">
            <el-table-column label="平台名称" prop="name" width="150px"/>
            <el-table-column label="平台首页网址(留空则不进行截图)" prop="url"/>
            <el-table-column label="在小葫芦的对应平台ID" prop="type"/>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click.native.prevent="remove(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <platform_edit_dialog :change="change" :visible.sync="dialog" v-model="selected"/>
    </el-card>
</template>

<script>
    import Platform_edit_dialog from "../component/platform_edit_dialog";

    export default {
        components: {Platform_edit_dialog},
        data() {
            return {
                data: [],
                selected: null,
                dialog: false,
            };
        },
        methods: {
            fetch() {
                this.$http.get('/api/platform').then(res => {
                    this.data = res.data;
                });
            },
            modify(row) {
                this.$http.post('/api/platform', row).then(res => {
                    this.$message.success('记录修改成功');
                }).catch(err => {
                    this.$message.error(err.response.data);
                });
            },
            openDialog(row, e, column) {
                if (column && column.label === '操作')
                    return;
                this.selected = row;
                this.dialog = true;
            },
            change(data) {
                this.data.push(data);
            },
            remove(row) {
                this.$confirm('监控平台关联很多数据，请谨慎对待！', `删除平台 ${row.name} ?`, {type: 'warning'}).then(() => {
                    this.$http.delete(`/api/platform/${row.id}`).then(() => {
                        this.$message.success('删除成功');
                        this.data.splice(this.data.indexOf(row), 1);
                    }).catch(err => {
                        this.$message.error(err.response.data);
                    });
                }).catch(() => {
                });
            }
        },
        mounted() {
            this.fetch();
        },
    }
</script>

<style scoped>

</style>